import React, {Fragment, PureComponent} from 'react';
import { connect } from 'dva';
import { Button, Card, Col, Form, Icon, Input, Row, Select, Tag , List, DatePicker} from 'antd';
import { FormattedMessage } from 'umi/locale';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import TagSelect from '@/components/TagSelect';
import StandardFormRow from '@/components/StandardFormRow';

import 'braft-editor/dist/output.css'
import styles from './TaskCommitList.less';
import moment from 'moment';
import Link from 'umi/link';

const { Option } = Select;
const { RangePicker } = DatePicker;
const FormItem = Form.Item;

const pageSize = 10;
@connect(({ taskCommit, loading }) => ({
  taskCommit,
  loading: loading.models.taskCommit,
}))
@Form.create()
class TaskCommitList extends PureComponent {
  state = {
    current: 0,
    select: {
      taskContentId : this.props.location.query.taskContentId || null
    }
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'taskCommit/fetch',
      payload: {
        current: 0,
        ...this.state.select
      }
    });
  }

  handleFormSubmit = e => {
    const { dispatch,form } = this.props;
    e.preventDefault();
    // eslint-disable-next-line
    form.validateFields((err, fieldsValue) => {
      this.setState({current: 0,select: fieldsValue},()=>{
        console.log()
        dispatch({
          type: 'taskCommit/fetch',
          payload: {
            current: 0,
            ...this.state.select
          },
        });
      });

    });
  };

  setOwner = () => {
    const { form } = this.props;
    form.setFieldsValue({
      owner: ['wzj'],
    });
  };

  fetchMore = () => {
    const { dispatch } = this.props;
    const nextCurrent = this.state.current+1
    this.setState({
      current: nextCurrent
    })
    dispatch({
      type: 'taskCommit/fetchNew',
      payload: {
        current: nextCurrent,
        ...this.state.select
      },
    });
  };

  loadArticleListContent = (answerRecordList) => {
    const elements=[];
    answerRecordList.forEach(item => {
      elements.push(
          <div className={styles.listContent}>
            <h4>{item.questionContent}</h4>
            <div className="braft-output-content" dangerouslySetInnerHTML={{__html: item.answerContext}}></div>
          </div>
      );
    })
    return elements;
  };

  render() {
    const {form, loading} = this.props;
    const {list, loadAble} = this.props.taskCommit;
    console.log(list)
    const { getFieldDecorator } = form;
    const owners = [
      {
        id: 'wzj',
        name: '我自己',
      },
      {
        id: 'wjh',
        name: '吴家豪',
      },
      {
        id: 'zxx',
        name: '周星星',
      },
      {
        id: 'zly',
        name: '赵丽颖',
      },
      {
        id: 'ym',
        name: '姚明',
      },
    ];

    const IconText = ({ type, text }) => (
      <span>
        <Icon type={type} style={{ marginRight: 8 }} />
        {text}
      </span>
    );

    const formItemLayout = {
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 },
        md: { span: 12 },
      },
    };

    const actionsTextMap = {
      expandText: <FormattedMessage id="component.tagSelect.expand" defaultMessage="Expand" />,
      collapseText: (
        <FormattedMessage id="component.tagSelect.collapse" defaultMessage="Collapse" />
      ),
      selectAllText: <FormattedMessage id="component.tagSelect.all" defaultMessage="All" />,
    };

    const loadMore =
        loadAble ? (
        <div style={{ textAlign: 'center', marginTop: 16 }}>
          <Button onClick={this.fetchMore} style={{ paddingLeft: 48, paddingRight: 48 }}>
            {loading ? (
              <span>
                <Icon type="loading" /> 加载中...
              </span>
            ) : (
              '加载更多'
            )}
          </Button>
        </div>
      ) : null;

    return (
      <PageHeaderWrapper
        title="提交列表"
      >
        <Fragment>
          <Card bordered={false}>
            <Form layout="inline">
              <StandardFormRow title="作者" grid>
                <Row>
                  <Col>
                    <FormItem {...formItemLayout} label="作者">
                      {getFieldDecorator('userName', {})(
                          <Input placeholder="姓名模糊查询"/>
                      )}
                    </FormItem>
                    {/*<FormItem {...formItemLayout}>*/}
                      {/*{getFieldDecorator('owner', {*/}
                        {/*initialValue: ['wjh', 'zxx'],*/}
                      {/*})(*/}
                        {/*<Select*/}
                          {/*mode="multiple"*/}
                          {/*style={{ maxWidth: 800, width: '100%' }}*/}
                          {/*placeholder="选择 owner"*/}
                        {/*>*/}
                          {/*{owners.map(owner => (*/}
                            {/*<Option key={owner.id} value={owner.id}>*/}
                              {/*{owner.name}*/}
                            {/*</Option>*/}
                          {/*))}*/}
                        {/*</Select>*/}
                      {/*)}*/}
                      {/*<a className={styles.selfTrigger} onClick={this.setOwner}>*/}
                        {/*只看自己的*/}
                      {/*</a>*/}
                    {/*</FormItem>*/}
                  </Col>
                </Row>
              </StandardFormRow>
              <StandardFormRow title="其它" grid last>
                <Row gutter={24}>
                  <Col xl={6} lg={6} md={6} sm={24} xs={24}>
                    <FormItem {...formItemLayout} label="话题">
                      {getFieldDecorator('task', {})(
                          <Select style={{ maxWidth: 400, width: '100%' }}>
                            <Option value="10000">第4期: Java基础</Option>
                          </Select>
                      )}
                    </FormItem>
                  </Col>
                  <Col xl={12} lg={12} md={12} sm={24} xs={24}>
                    <FormItem {...formItemLayout} label="提交日期">
                      {getFieldDecorator('commitDate', {
                        rules: [{required: false, message: '请选择提交日期'}],
                      })(
                          <RangePicker placeholder={['开始日期', '结束日期']} format="YYYY-MM-DD" style={{ width: '100%' }} />
                      )}
                    </FormItem>
                  </Col>
                  <Col xl={4} lg={4} md={4} sm={24} xs={24}>
                    <Button type="primary" onClick={this.handleFormSubmit}>查询</Button>
                  </Col>

                </Row>
              </StandardFormRow>
            </Form>
          </Card>
          <Card
            style={{ marginTop: 24 }}
            bordered={false}
            bodyStyle={{ padding: '8px 32px 32px 32px' }}
          >
            <List
              size="large"
              loading={list.length === 0 ? loading : false}
              rowKey="id"
              itemLayout="vertical"
              loadMore={loadMore}
              dataSource={list}
              renderItem={item => (
                <List.Item
                  key={item.id}
                  // actions={[
                  //   <IconText type="star-o" text={item.star} />,
                  //   <IconText type="like-o" text={item.like} />,
                  //   <IconText type="message" text={item.message} />,
                  // ]}
                  extra={<div className={styles.listItemExtra} />}
                >
                  <List.Item.Meta
                    title={
                      <div className={styles.listItemMetaTitle}>
                        <span>
                          <Link to={"/work?commitId="+item.id}>
                             <Tag><h2>第{item.taskNumber}期话题——{item.taskSubject}  ({item.userName})</h2></Tag>
                          </Link>
                        </span>
                        <span>提交时间：</span>  <em>{moment(item.commitDate).format('YYYY-MM-DD HH:mm')}</em>
                      </div>
                    }
                    // description={}
                  />
                  {this.loadArticleListContent(item.answerRecordList)}
                </List.Item>
              )}
            />
          </Card>
        </Fragment>
      </PageHeaderWrapper>
    );
  }
}

export default TaskCommitList;
